<template>
  <el-container>

  
    <el-main>
      <el-row>
        <el-col :span="22" :offset="1">
          <el-button @click="addForm" size="mini">添加用户</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="22" :offset="1">
          <el-table :data="users" border="" size="mini">
            <el-table-column prop="name" label="用户名"></el-table-column>
            <el-table-column prop="created" label="创建时间">
              <template slot-scope="scope">
                <span>{{$public.comTime(scope.row.created)}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="editTask(scope.row.id)">编辑</el-button>
                <el-button type="text" @click="deleteTask(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              background
              :page-size="pageSize"
              :page-count="currentPage"
              layout="prev, pager, next"
              @current-change="current_change"
              :total="users.length"
            ></el-pagination>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      users: [],
      userId: "",
      total: 0,
      currentPage: 1,
      pageSize: 10,
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  methods: {
    addForm() {
      this.$router.push({
        path:"/settings/usermsg",
      })
    },
    deleteTask(id) {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http.Delete(this.$api.user + "/" + id, {}, () => {
            this.userGet();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    editTask(id) {
      this.$router.push({
        path:"/settings/usermsg",
        query:{
          id: id
        }
      })
    },
    addclose() {
      this.dialogFormVisible = false;
      this.userGet();
    },
    userGet() {
      this.$http.Get(
        this.$api.users,
        { page: this.currentPage, count: this.pageSize },
        (res) => {
          this.users = res.data;
          this.total = res.count;
        }
      );
    },
    current_change(e) {
      this.currentPage = e;
      this.userGet();
    },
  },
  created() {
    this.userGet();
  },
};
</script>